import { defineComponent, nextTick, reactive } from "vue";
import _ from "lodash";
export default defineComponent({
  setup(props, { expose }) {
    const config_default = {
      type: 'one',
    };
    const handler_default = {
      choose: () => { },
      close: () => { },
      select: () => { },
    }
    const state = reactive({
      isShow: false,
      config: _.cloneDeep(config_default) as any,
      handler: _.cloneDeep(handler_default) as any,
    })
    const open = (config: any, handler: any) => {
      Object.entries(config || {}).forEach((item: any, index: number) => {
        state.config[item[0]] = item[1];
      })
      state.handler.choose = handler.choose;
      state.handler.close = handler.close;
      state.handler.select = handler.select;
      state.isShow = true;
    }
    const close = (e: any) => {
      state.handler?.close?.(e, state.config);
      nextTick(() => {
        state.config = _.cloneDeep(config_default);
        state.handler = _.cloneDeep(handler_default);
      })
    }
    expose({
      open,
    })
    return () => (
      <nut-calendar
        v-model:visible={state.isShow}
        {...state.config}
        onChoose={(e: any) => state.handler?.choose?.(e, state.config)}
        onClose={(e: any) => close(e)}
        onSelect={(e: any) => state.handler?.select?.(e, state.config)}
      >
      </nut-calendar>
    )
  }
})